<template>
  <Row class="data-dictionary">
    <Col span="4" class="col-height100">
      <p>字典类型:</p>
      <ul class="ul-list">
        <li
          v-for="(item, index) in typeList"
          :key="item.id"
          @click="typeListClick(item, index)"
          :class="{ active: activeIndex === index }"
        >
          {{ item.name }}
          <!--<Tooltip placement="left-start" :content="item.name" class="tooltip">
            <Icon type="ios-help-circle" class="icon" />
          </Tooltip>-->
        </li>
      </ul>
    </Col>
    <Col span="20" class="col-main">
      <div class="button-s">
        <Button type="primary" v-if="addBtnShow" @click="addBtn('add', '1', '字典新增')">新增</Button>
        <Button type="primary" v-if="deleteBtnShow" @click="deleteBtn">删除</Button>
      </div>
      <Table
        border
        ref="selection"
        :columns="columns"
        :data="dictList"
        @on-select="selectRiado"
        @on-select-all="selectRiadoAll"
        @on-select-cancel="selectCancel"
        @on-select-all-cancel="selectAllCancel"
      >
        <template slot-scope="{ row, index }" slot="action">
          <span
            title="编辑"
            class="button-class"
            type="text"
            @click="addBtn('editor', row.id, '字典编辑')"
            v-if="editoBtnShow"
          >编辑</span>
          <span
            title="详情"
            class="button-class"
            type="text"
            @click="addBtn('details', row.id, '字典详情')"
          >详情</span>
        </template>
      </Table>
      <Page
        class="pagination"
        :page-size-opts="[10,20,50,100]"
        :total="page.total"
        :current="page.current"
        :page-size="page.pageSize"
        @on-change="pageChange"
        @on-page-size-change="sizeChange"
        show-elevator
        show-sizer
        show-total
      />
    </Col>
  </Row>
</template>

<script>
export default {
  name: 'dict-management',
  data() {
    return {
      addBtnShow: false,
      importBtnShow: false,
      deleteBtnShow: false,
      editoBtnShow: false,
      activeIndex: 0,
      typeCode: '',
      typeId: '',
      deleteList: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '序号',
          align: 'center',
          width: 100,
          render: (h, params) => {
            return h(
              'span',
              params.index + (this.page.current - 1) * this.page.pageSize + 1
            )
          }
        },
        {
          title: '字典名称',
          key: 'name',
          align: 'center'
        },
        {
          title: '字典编号',
          key: 'code',
          align: 'center'
        },
        {
          title: '操作',
          width: 150,
          align: 'center',
          slot: 'action'
        }
      ],
      dictList: [],
      typeList: [],
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  methods: {
    addBtn(type, id, name) {
      if(type === 'add'){
        this.$router.push({
          //path: `dict-management/${type}/${id}/${name}`,
          name:'dict-management-add',
          params:{type,id,name,typeId:this.typeId},
        })
      }else if(type === 'editor'){
        this.$router.push({
          name:'dict-management-edit',
          params:{type,id,name},
          query: {
            typeId: this.typeId
          }
        })
      }else if(type === 'details'){
        this.$router.push({
          name:'dict-management-detail',
          params:{type,id,name},
          query: {
            typeId: this.typeId
          }
        })
      }

    },
    //删除
    deleteBtn() {
      if (this.deleteList.length <= 0) {
        this.$Message.warning('请选择要删除的数据')
        return false
      }
      const deleteList = []
      this.deleteList.forEach(val => {
        deleteList.push(val.id)
      })
      this.$Modal.confirm({
        title: '温馨提示',
        closable: true,
        content: '确认删除吗？',
        width: 360,
        onOk: () => {
          this.getDictDelete(deleteList)
        }
      })
    },
    typeListClick(item, index) {
      console.log(item)
      this.deleteList = []
      this.activeIndex = index
      this.typeCode = item.code
      this.typeId = item.id
      this.getDictList(item.code)
    },
    getDictTypeList() {
      let params = {
        currentPage: 1,
        pageSize: 999,
        orderColumn: '',
        orderSort: 'desc',
        whereMap: {
          name: '', //"数据字典类型名称",
          code: '', //"数据字典类型代码",
          description: '' //"说明"
        }
      }
      this.$api.dataDictionary.getDictTypeList(params).then(res => {
        if (res.code === 200) {
          this.typeList = res.data.resultObject
          this.typeCode = this.typeList[0].code
          this.typeId = this.typeList[0].id
          this.getDictList(this.typeCode)
        } else {
          this.$Message.error(res.data.data)
        }
      })
    },
    getDictList(typeCode) {
      let params = {
        currentPage: this.page.current,
        pageSize: this.page.pageSize,
        orderColumn: '',
        orderSort: 'asc',
        whereMap: {
          typeCode: typeCode //"类型编码",
        }
      }
      this.$api.dataDictionary.getDictList(params).then(res => {
        if (res.code === 200) {
          this.dictList = res.data.resultObject
          this.page.total = res.data.totalRecord
          this.page.totalPage = res.data.totalPage
        } else {
          this.$Message.error(res.data.data)
        }
      })
    },
    getDictDelete(params) {
      this.$api.dataDictionary.getDictDelete(params).then(res => {
        if (res.code === 200) {
          this.$Message.success(res.message);
          this.deleteList = [];
          this.getDictList(this.typeCode)
        } else {
          this.$Message.error(res.message)
        }
      })
    },

    //全选
    selectRiadoAll(e) {
      this.deleteList = e
    },
    //全选取消
    selectAllCancel() {
      this.deleteList = []
    },
    //单选
    selectRiado(e) {
      this.deleteList = e
    },
    //取消某一项
    selectCancel(e) {
      this.deleteList.splice(e, 1)
    },
    pageChange(current) {
      this.page.current = current
      this.getDictList(this.typeCode)
    },
    sizeChange(size) {
      this.page.current = 1
      this.page.pageSize = size
      this.getDictList(this.typeCode)
    },
    //按钮显示
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key === this.$route.name) {
          console.log(Object.values(val))
          Object.values(val)[0].map(item => {
            if (item.code === 'P_0504_01') {
              this.addBtnShow = true
            } else if (item.code === 'P_0504_02') {
              this.editoBtnShow = true
            } else if (item.code === 'P_0504_03') {
              this.deleteBtnShow = true
            }
          })
        }
      })
    }
  },
  mounted() {
    this.getDictTypeList()
    this.buttonShow()
  },
  activated() {
    this.getDictList(this.typeCode)
  }
}
</script>

<style lang="scss" scoped>
.data-dictionary {
  height: calc(100% - 0px);
  .col-height100 {
    height: 100%;
    border-right: 1px solid #ebeef1;
    overflow: auto;
    p {
      padding: 10px;
    }
  }
  .col-main {
    padding: 10px;
    .button-s {
      margin-bottom: 15px;
      button {
        margin-right: 15px;
      }
    }
  }
}
.ul-list {
  list-style: none;
  //height: calc(100% - 10px);
  background-color: #ffffff;
  li {
    height: 45px;
    line-height: 45px;
    border-bottom: 1px solid #ebeef1;
    padding: 0 25px;
    cursor: pointer;
    font-size: 14px;
    //overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    position: relative;
    .tooltip {
      position: absolute;
      right: 10px;
      top: 0px;
    }
    .icon {
      color: #1e88f5;
    }
    &.active {
      color: #2d8cf0;
      box-sizing: border-box;
    }
  }
  li:hover {
    color: #2d8cf0;
  }
}
</style>
